{% extends "base.html" %}

{% block content %}
<div class="header-for-bg">
            <div class="background-header position-relative">
               <img src="/static/images/page-img/profile-bg3.jpg" class="img-fluid w-100" alt="header-bg">
               <div class="title-on-header">
                  <div class="data-block">
                     <h2>Your Friends</h2>
                  </div>
               </div>
            </div>
         </div>

<div id="content-page" class="content-page">
    <div class="container">
        <div class="row">
            {% for friend in current_user.friends %}
                <div class="col-md-6">
                    <div class="iq-card">
                        <div class="iq-card-body profile-page p-0">
                            <div class="profile-header-image">
                                <div class="cover-container">
                                    <img src="{{friend.bg}}" alt="profile-bg"
                                         class="rounded img-fluid w-100">
                                </div>
                                <div class="profile-info p-4">
                                    <div class="user-detail">
                                        <div class="d-flex flex-wrap justify-content-between align-items-start">
                                            <div class="profile-detail d-flex">
                                                <div class="profile-img pr-4">
                                                    <a href="/id{{friend.id}}"><img src="{{friend.avatar}}" alt="profile-img"
                                                         class="avatar-130 img-fluid"/></a>
                                                </div>
                                                <div class="user-data-block">
                                                    <a href="/id{{friend.id}}"><h4 class="">{{friend.name}} {{friend.surname}}</h4></a>
                                                    {% if friend.status|length > 270 %}
                                                    <p>{{friend.status[:267]}}...</p>
                                                    {% else %}
                                                    <p>{{friend.status}}</p>
                                                    {% endif %}
                                                </div>
                                            </div>
                                            {% if friend in current_user.friends %}
                                            <button type="button" class="btn btn-outline-danger rounded-pill mb-3" onclick="DeleteFriend({{current_user.id}}, {{friend.id}})">
                                                Delete from friends
                                            </button>
                                            {% elif friend not in current_user.friends %}
                                            <button type="button" class="btn btn-outline-primary rounded-pill mb-3" onclick="AddFriend({{current_user.id}}, {{friend.id}})">
                                                Add as friend
                                            </button>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}